正常情况下，内边距边框是在元素设置的宽度和高度之上进行绘制的
1、 content-box:内边距和边框是在元素设置的宽度和高之外进行绘制
2、 border-box:内边距和边框是在元素设置的宽度和高度之内进行绘制
盒子的宽度=左边框+右边框+左内边距+右内边距+元素内容的宽度
盒子的高度=上边框+下边框+上内边距+下内边距+元素内容的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.da{
width:240px;height:150px;background:green;float:left;
padding:30px;
border:10px solid red;
box-sizing:center-box
}
.ia{
width:100%;height:100%
}
.db{
width:240px;height:150px;background:orange;float:left;
}
.ib{
width:100%;height:100%
}
</style>
</head>
<body>
<div class="da">
<img class="ia" src="css7.03.01.png" alt="">
</div>
<div class="db">
<img class="ib" src="css7.03.01.png" alt="">
</div>
</body>
</html>
返回值：
如改为：
box-sizing:border-box
返回值：
